<template>
 <div class="pd10 row">
     
     <!-- 左侧展示 -->
     <div class="floatL w70 H100">
        <div class="con-wrapper">
            <ul class="ul-list inline">
                <li 
                v-for="(item,index) in xmList" 
                :key="index"
                :class="cur == index ? 'active':'' ">
                    <a href="javascript:;" @click.stop="changeTab(item,index)">{{item.name}}</a>
                </li>
            </ul>
            <!-- 轮播 -->
            <!-- <keep-alive> -->
                <hy-carousel v-loading="loading" :nofit="curItem.nofit" :imgList= curItem.images  :showPic="isShow"/>
            <!-- </keep-alive> -->
            
        </div>   
     </div>
     <!-- 右侧导航 -->
     <div class=" floatL w30 H100">
        <div class="con-wrapper">
            <div class="title">
                <span class="icon icon01"></span>
                {{ title }}
            </div>
            
            <!-- 轮播解说 -->
            <div class="project-info">
                <!-- <form id="form" method="post"></form> -->
                <h4>{{ curItem.info }}</h4>
                <p class="ul-list-title"> 负责业务：</p>
                <ul class="ul-list-02">
                    <li v-for="item in curItem.idoList" :key="item.id">{{ item.value }}</li>
                </ul>
                <p class="ul-list-title" v-show="showOnline"> 线上展示：</p>
                <ul class="ul-list-02">
                    <li v-for="item in curItem.websiteList" :key="item.id">
                        {{ item.name }}：
                        <a href="#" @click.stop.prevent="toRescue(item.url)">{{ item.url }}</a>
                    </li>
                </ul>
            </div>
        </div>   
     </div>
 </div>
</template>

<script>

 export default {
    name:'projectCenter',
    data () {
     return {
         loading:null,
         isShow:false,
         title:'项目介绍',
         cur:0,
         curItem:{},
         img:require('assets/img/img_01.jpg'),
         showOnline:true,
         xmList:[
             {
                 id:0,
                 name:'本研一体教务管理系统',
                 info:'技术栈：HTML、javascript、Css3、Sass、vue、vuex、iview、vue-cli、webpack  ',
                 idoList:[
                     {
                         id:0,
                         value:'完成框架搭建，接口规则制定，解决浏览器兼容性问题。'
                     },
                     {
                         id:1,
                         value:'根据客户需求，维护框架页面（登录、锁屏、引导等），实现用户的风格切换，自定义页面布局，同时集成第三方鉴权登录，即时通讯。'
                     },
                     {
                         id:2,
                         value:'配合后端，完成项目的系统管理，课程，培养方案，任务，排课，选课，成绩，毕业等十余个模块的研发工作。'
                     },
                     {
                         id:3,
                         value:'使用本地存储，vuex，对排课，选课等复杂功能的数据进行预热缓存，提高响应能力，节省资源开销。'
                     },
                     {
                         id:4,
                         value:'使用echart.js，完成大屏图表的统计功能。'
                     },
                 ],
                 websiteList:[],
                 nofit:false,
                 images:[
                     {
                         id:0,
                         imgUrl:require('assets/img/project/byyth/1.png'),
                     },{
                         id:1,
                         imgUrl:require('assets/img/project/byyth/2.png'),
                     },{
                         id:2,
                         imgUrl:require('assets/img/project/byyth/3.png'),
                     },{
                         id:3,
                         imgUrl:require('assets/img/project/byyth/4.png'),
                     },{
                         id:4,
                         imgUrl:require('assets/img/project/byyth/5.png'),

                     },{
                         id:5,
                         imgUrl:require('assets/img/project/byyth/6.png'),
                     },{
                         id:6,
                         imgUrl:require('assets/img/project/byyth/7.png'),
                     },{
                         id:7,
                         imgUrl:require('assets/img/project/byyth/8.png'),
                     },{
                         id:8,
                         imgUrl:require('assets/img/project/byyth/9.png'),
                     },{
                         id:9,
                         imgUrl:require('assets/img/project/byyth/10.png'),
                     }
                 ]
             },
             {
                 id:1,
                 name:'掌上教学App',
                 info:'技术栈：HTML、javascript、Css3、vue、vuex、nvue、uniapp ',
                 idoList:[
                     {
                         id:0,
                         value:'负责app的整体风格和交互模式，负责android，ios不同环境中部分功能的兼容。'
                     },
                     {
                         id:1,
                         value:'完成app中常用申报及查询，如课表查询，成绩查询，课堂点名，课后预留习题，学生在线答题，师生互动，选课等。'
                     },
                     {
                         id:2,
                         value:'使用个推sdk，集成了推送消息。并在选课模块中使用人脸识别校验，并且集成微信/支付宝支付，用于缴纳选课费用。'
                     }
                 ],
                 websiteList:[{
                     id:0,
                     name:'下载地址',
                     url:'http://d.7short.com/6qe2'
                 }],
                 nofit:true,
                 images:[
                     {
                         id:0,
                         imgUrl:require('assets/img/project/app/1.jpg'),
                     },{
                         id:1,
                         imgUrl:require('assets/img/project/app/2.jpg'),
                     },{
                         id:2,
                         imgUrl:require('assets/img/project/app/3.jpg'),
                     },{
                         id:3,
                         imgUrl:require('assets/img/project/app/4.jpg'),
                     },{
                         id:4,
                         imgUrl:require('assets/img/project/app/5.jpg'),
                     },
                 ]
             },
             {
                 id:2,
                 name:'站群',
                 info:'技术栈：HTML、javascript、Css、Bootstrap、freemarker模板引擎、easyui、jquery、ajax     ',
                 idoList:[
                     {
                         id:0,
                         value:'独立完成项目的所有前端部分，如系统配置，站点管理，文章发布，模板建设，问卷调查等功能。'
                     },
                     {
                         id:1,
                         value:'使用freemarker语法，为多个大学在线设计了网站模板并正式上线。'
                     }
                 ],
                 websiteList:[{
                     id:0,
                     name:'站群后台网址( 用户名:admin, 密码:abc123 )',
                     url:'http://xiaoxinmo.com:49578/websites '
                 },{
                     id:1,
                     name:'四川大学双一流',
                     url:'https://syl.scu.edu.cn'
                 },{
                     id:2,
                     name:'哈工大深圳教务',
                     url:'http://due.hitsz.edu.cn'
                 },{
                     id:3,
                     name:'黑建筑各系网站',
                     url:'http://www.hict.org.cn'
                 }],
                 nofit:false,
                 images:[
                     {
                         id:0,
                         imgUrl:require('assets/img/project/zq/1.png'),
                     },{
                         id:1,
                         imgUrl:require('assets/img/project/zq/2.png'),
                     },{
                         id:2,
                         imgUrl:require('assets/img/project/zq/3.png'),
                     },{
                         id:3,
                         imgUrl:require('assets/img/project/zq/4.png'),
                     },{
                         id:4,
                         imgUrl:require('assets/img/project/zq/5.png'),
                     }
                 ]

             },
             {
                id:3,
                name:'黑龙江省药品集中采购',
                info:'技术栈：HTML、javascript、Css、jQuery、ajax、echart.js   ',
                idoList:[
                     {
                         id:0,
                         value:'优化登录，首页的页面布局。 '
                     },
                     {
                         id:1,
                         value:'完成投标，评标，以及网上交易，合同申报部分的功能。'
                     },
                     {
                         id:2,
                         value:'使用echart.js完成合同模块的中控大屏统计。'
                     }
                 ],
                websiteList:[{
                     id:0,
                     name:'门户及后台登录( 用户名:admin, 密码:abc123 )',
                     url:'http://xiaoxinmo.com:47069/ypcg2.0'
                 }],
                nofit:false,
                images:[
                     {
                         id:0,
                         imgUrl:require('assets/img/project/ypcg/1.png'),
                     },{
                         id:1,
                         imgUrl:require('assets/img/project/ypcg/2.png'),
                     },{
                         id:2,
                         imgUrl:require('assets/img/project/ypcg/3.png'),
                     },{
                         id:3,
                         imgUrl:require('assets/img/project/ypcg/4.png'),
                     },{
                         id:4,
                         imgUrl:require('assets/img/project/ypcg/5.png'),
                     },{
                         id:5,
                         imgUrl:require('assets/img/project/ypcg/6.png'),                     
                     },{
                         id:6,
                         imgUrl:require('assets/img/project/ypcg/7.png'),
                     },{
                         id:7,
                         imgUrl:require('assets/img/project/ypcg/8.png'),
                     },
                 ]
             },
             
             
             
             
             
         ],
         
         
     }
   },
   created(){
   },
   mounted(){
       this.cur = 0;
       this.curItem = this.xmList[0];
       this.showOnline = false;
       this.isShow = true;
   },
   methods: {
       changeTab(item,index) {
            var self = this;
            this.cur = index;
            this.curItem = item; 
            //是否显示线上展示标题
            if(!this.curItem.websiteList.length){
                this.showOnline = false;
            }else{
                this.showOnline = true;
            };

            this.loading = true;
            this.isShow = false;
            setTimeout(function(){
                self.loading = false;
                self.isShow = true;
            },500)
           
       },
       showDemo(){
           this.$router.push({
                path: '/home' 
            })
       },
       handleClose(done) {
        done();
       },
       toRescue(url){
   
             window.open(url,'_blank');
 
       }
   }
 }
</script>

<style  lang="scss">

.ul-list {
    margin-top:10px;
    line-height: 40px;
    text-align: left;
    border-bottom:4px solid #01bd8f;
    &.inline li{
        display:inline-block;
    }
    li{
        &.active{
            a{
              color:#f5fcfb;
              background:#01bd8f;  
            }
        }
        a{
            color:#3d5271;
            display: block;
            padding:0 24px;
            &:hover{
                color:#44caa9;
                background:#edfaf8;
            }
        }
    }
}
.ul-list-title{
    font-weight: bold;
}
.ul-list-02{
    padding:10px 24px;
    li{
        list-style: square;
        font-size:1rem;
        line-height:1.6;
        margin-bottom:18px;
        a{
            color:#01bd8f;
        }
    }
}
.project-info{
    width:100%;
    margin:0 auto;
    padding:15px;
    text-align: left;
    h4{
        margin-bottom:10px;
        padding-bottom:15px;
        border-bottom:2px dotted #01bd8f;
    }
}

.highlayer{
    .el-dialog__headerbtn{
        z-index:1000;
        i{
            color:#fff;
        }
    }
}
@media screen and (max-width: 800px) {
  .isMobile{
      .project-info{
          padding:10px;
      }
      .ul-list{
        padding:0px;
        li{
            a{
               padding:0 10px;
            }
        }
    }
    .ul-list-02{
        padding:10px;
        li{
            a{
                color:#01bd8f;
            }
        }
    }
  }
  
}
</style>
